import { async } from 'q';
<!--
 * @Author: your name
 * @Date: 2021-01-12 14:31:49
 * @LastEditTime: 2021-01-12 15:13:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\test\registrationVerify\registrationVerify.vue
-->
<template>
    <div class="test-registrationVerify-main-box">
        <div class="mian-box">
            <div class="header-box">
                <span>{{$t('devWifi.wifiSN')}}</span>
                <el-input v-model="wifiSN" style="width:200px;"></el-input>
                <el-button @click='snIsUnique' :disabled="flag">验证</el-button>
            </div>
            <div class="content-box">
                <span class="float-text">验证信息</span>
                <span class="bottom-text">仅显示最近10条验证信息</span>
                <p v-for='(item,index) in textList' :key='index' :class="item.status == 0 ? 'red':'green'"> 
                <i class="el-icon-warning " v-if='item.status == 0'></i>
                <i class="el-icon-success" v-else></i>
                注册号 {{item.wifiSN}} {{item.status == 0 ? '不存在':'验证成功'}}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            wifiSN:'',
            textList:[],
            flag:false
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        async snIsUnique(){
            this.flag = true
            let res = await this.API.snIsUnique({
                wifiSN:this.wifiSN
            })
            let obj = {
                wifiSN:this.wifiSN,
                status:res.object,
            }
            this.textList.unshift(obj)
            if(this.textList.length>10){
                this.textList.pop()
            }
            this.flag = false
        }
    },
};
</script>

<style  lang="less" scoped>
.test-registrationVerify-main-box{
    .mian-box{
        width: 500px;
        margin: 0 auto;
        height: 500px;
        background-color: #fff;
        .header-box{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .content-box{
            background-color: #f6f6f6;
            border: 1px solid #ccc;
            margin-top: 30px;
            height: calc(100% - 65px);
            position: relative;
            padding: 0px 10px;
            .float-text{
                position: absolute;
                top: -12px;
                left: 27px;
                background-color: #fff;
                display: block;
            }
            .bottom-text{
                position: absolute;
                bottom: 0px;
                right: 5px;
                display: block;
            }
            .red{
                color: red;
            }
            .green{
                color: green;
            }
        }
    }
}
</style>
